上一篇提到了gradient的放置與多圖片的放置方法
今天來更深入了解一下gradient漸層怎麼設定吧!d(`･∀･)b

各式各樣的漸層

?linear-gradient()

background: linear-gradient(
             方向, 
             顏色 色彩位置, 
             顏色 色彩位置, 
             顏色 色彩位置,
             ...);

方向：

• to (top/bottom/right/left)
• to (top/bottom/right/left)　(top/bottom/right/left)
• 角度(deg) ->順時針遞增
• turn (1 turn=360deg, 0.25 turn=90deg) ->順時針遞增

顏色：

• RGB
• RGBA
• HSL
• HSLA
• 關鍵字(red / blue / yellow / transparent...)

色彩位置：

• px
• %

色彩位置的設定：

色彩位置的設定當初我真的是沒看懂過XD
都亂調或是乾脆不進行設定
這次研究完之後發現它其實可以設定的非常細緻，做出跟用繪圖軟體一樣漸層效果

開始前有個很重要的概念
第一個顏色都是從0%開始，即便直接設定大於0%
第一個顏色的範圍都是"0%~設定的值"

最後一個顏色都是100%結束，即便直接設定小於100%
最後一個顏色的範圍都是"設定的值~100%"

1. 不設定色彩位置：
   第一個顏色從0%開始
   最後一個顏色到100%結束
   沒有設定色彩位置時，會自動"平均分配"漸層比例
   0%(red)-->yellow(50%)-->green(100%)

background: linear-gradient(to right, red, yellow, green);

2. 設定色彩位置：
   0%~10%都是第一個顏色(red)
   10%~30%則從第一個顏色(red)漸層到第二個顏色(yellow)
   30%~100% 從第二個顏色(yellow)漸層到最後一個顏色(green)

background: linear-gradient(to right, red 10%,  yellow 30% , green 100%);

3. 一個色彩設定兩次：
   看過上面兩種例子之後這個應該很好想像出它的感覺~
   0%~10% 是red
   10%~50% 是red
   50%~80% 是 red 漸層到 green
   80%~100% 即便我不設定green 100%，最後一個色彩都是到100%為止

background: linear-gradient(to right, red 10%, red 50% ,green 80%);

4. 設定位置不設定色彩：
   ㄟㄟㄟ!?可以這樣嘛!?這個用法真是讓我大開眼界
   這個用法的效果是
   0%~10% red
   10%~100% 從 red 漸層到 green，但會以70%為中繼點
   就像是在Illustrator 拉動的那個小菱形一樣
   

linear-gradient(to right, red 10%, 70%, green 100%);

感覺還是有點模糊嗎?
其他類似設定對比一下，就可以發現它的不同囉!

5. 一個色彩設定兩個色彩位置：

   當設定兩個漸層位置時就可以很明確的色彩範圍框出來
   再把色彩位置進行重疊的話就不會有漸層的效果
   色彩跟色彩的邊界就是分明的

   0%~30% Red
   30%~60% yellow
   60%~100% green

background: linear-gradient(to right, red 0% 30%,  yellow 30% 60%, green 60% 100%)

(哇喔~不小心畫出立陶宛的國旗了>w<)

很有趣的是，當我寫在後面的色彩起點位置值小於前一個色彩的終點值時，還是會以"前一個色彩終點值"為準

background: linear-gradient(to right, red 0% 30%,  green 30% 60%, yellow 40% 100%); 

但是當我沒有將前一個色彩的終點值跟下一個色彩起始值重疊
它就會進行漸層囉~(60%~70%從綠色漸層到黃色)

codepen- linear-gradient實作

參考資料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient